<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 360px;
        margin: 100px auto;
        border: 1px solid gray;
        padding-top: 360px;
        background: url("./02商品预览/imgs/01big.jpg") no-repeat;
    }
    ul{
       list-style: none;
      
       border-top: 1px solid gray;
    }
    li{
        float: left;
    }
    li>img{
        cursor: pointer;
    }
</style>
<body>
    <div class="box">
        <ul>
            <li><img src="./02商品预览/imgs/01.jpg" alt=""></li>
            <li><img src="./02商品预览/imgs/02.jpg" alt=""></li>
            <li><img src="./02商品预览/imgs/03.jpg" alt=""></li>
            <li><img src="./02商品预览/imgs/04.jpg" alt=""></li>
            <li><img src="./02商品预览/imgs/05.jpg" alt=""></li>
        </ul>
    </div>
</body>
<script>
    window.onload = function(){
        var boxs = document.querySelector("div")
        var imgs = document.querySelectorAll("img");
        imgs.forEach((item,index)=>{
            //鼠标经过
            item.onmouseover = function(){
               boxs.style.background="url(./02商品预览/imgs/0"+(index+1)+"big.jpg)";
            }
        })
    }
</script>
</html>